<script setup lang="ts">
import '@/views/web-site-template/qixi-festival/style/FiraCode.css'
import '@/views/web-site-template/qixi-festival/style/lovexhj.css'
import {onMounted, ref, computed} from "vue";
import TypeIt from 'typeit'

import WOW from 'wow.js'
import "@/views/web-site-template/qixi-festival/js/sakura.js"

// Import Swiper Vue.js components
import {Swiper, SwiperSlide} from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';

import 'swiper/css/navigation';
import {EffectCoverflow, EffectFlip, Navigation, Pagination} from "swiper/modules";
import {useRoute} from "vue-router";
import {queryParam} from "@/api/entertainment/websiteGenerate/index.ts";
import {NSpin, NResult, NButton} from 'naive-ui';

const modules = [EffectCoverflow, Pagination,EffectFlip,Navigation]

const textRef = ref<HTMLElement | null>(null)
const route = useRoute()
const loading = ref(true)
const error = ref<string | null>(null)
const data = ref({
  myName: '',
  heName: '',
  myFaceUrl: '',
  heFaceUrl: '',
  firstThing: '',
  wantTalk: '',
  myTalk: '',
  date: '',
  ImgList: [],
  commemorateList: []
})

const loveDays = computed(() => {
  if (!data.value.date) return 0;
  const startDate = new Date(data.value.date).getTime();
  const today = new Date().getTime();
  return Math.floor((today - startDate) / (1000 * 60 * 60 * 24));
})

const initPageAnimations = () => {
  const wow = new WOW()
  wow.init()

  if (textRef.value) {
    new (TypeIt)(textRef.value, {
      strings: [data.value.myName + "&&" + data.value.heName],
      cursorChar: "<span class='cursorChar'>|<span>",//用于光标的字符。HTML也可以
      speed: 100,
      lifeLike: true,// 使打字速度不规则
      cursor: true,//在字符串末尾显示闪烁的光标
      breakLines: false,// 控制是将多个字符串打印在彼此之上，还是删除这些字符串并相互替换
      loop: true,//是否循环
    }).go()
  }
}

const fetchData = async () => {
  const uuid = route.query.uuid;
  if (!uuid) {
    error.value = "无效的链接，缺少必需的参数。";
    loading.value = false;
    return;
  }

  loading.value = true;
  error.value = null;

  try {
    const res = await queryParam(uuid as string);
    data.value = res.data;
    setTimeout(initPageAnimations, 100);
  } catch (e: any) {
    error.value = `加载数据失败: ${e.message || '未知错误'}`;
    console.error(e);
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  fetchData();
})
</script>

<template>
  <div v-if="loading" class="loading-container">
    <n-spin size="large" />
  </div>
  <div v-else-if="error" class="error-container">
    <n-result status="error" title="加载失败" :description="error">
      <template #footer>
        <n-button @click="fetchData">重试</n-button>
      </template>
    </n-result>
  </div>
  <div v-else>
    <!-- 标题板块 -->
    <div class="title">
      <img src="https://cdn.jxwazx.cn/huahua-api/web-site-resources/%E4%B8%83%E5%A4%95%E7%89%B9%E4%BE%9B/bg1.gif" alt="bgGif">
      <p ref="textRef" class="msg"></p>
    </div>

    <!-- 分页1 - 骚话 -->
    <div class="page page1 flex">
      <swiper style="height: 400px;width: 550px;" :navigation="false" :modules="modules"
              class="margin-auto">
        <swiper-slide class="flex">
          <div class="page1-lovexhj1 margin-auto">
            <img :src="data.myFaceUrl" alt="huahua">
            <img src="https://cdn.jxwazx.cn/huahua-api/web-site-resources/%E4%B8%83%E5%A4%95%E7%89%B9%E4%BE%9B/cat.gif" alt="cat">
            <img :src="data.heFaceUrl" alt="huahua">
            <p id="lovetime">我们已经在一起 {{ loveDays }} 天啦</p>
            <p>我也不知道该准备一点什么给你逗你开心</p>
            <p>还是写一点好玩的送给你吧~</p>
            <span class="right">往右划动 →</span>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="page1-lovexhj1">
            <img class="cat" src="https://cdn.jxwazx.cn/huahua-api/web-site-resources/%E4%B8%83%E5%A4%95%E7%89%B9%E4%BE%9B/cat2.gif" alt="cat2">
            <p class="catText">你常对我发的表情 ↑</p>
            <p>上次也是花心思写了一个小玩意给你</p>
            <p>但我觉得整体设计&&界面都过于<b>LOW</b></p>
            <p>那就重新送你一个吧</p>
            <span class="right">再划一下 →</span>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="page1-lovexhj1">
            <img class="cat" src="https://cdn.jxwazx.cn/huahua-api/web-site-resources/%E4%B8%83%E5%A4%95%E7%89%B9%E4%BE%9B/cat3.gif" alt="cat3">
            <p class="catText">抱死你 ↑</p>
            <p>这次我<b>超级超级超级超级</b></p>
            <p>认真的写了一遍</p>
            <p style="font-size: 13px;">以 框架构造、
              <span style="color: red; font-size: 16px;">爱你</span>、
              视觉体验、响应式 为核心制作
            </p>
            <span class="right">再划一次吧 →</span>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="page1-lovexhj1">
            <img class="cat" src="https://cdn.jxwazx.cn/huahua-api/web-site-resources/%E4%B8%83%E5%A4%95%E7%89%B9%E4%BE%9B/cat4.gif" alt="cat4">
            <p class="catText">拍你猪头 ↑</p>
            <p>这次应该不会太难看了吧</p>
            <p>希望你喜欢呀</p>
            <p>爱你哟(๑′ᴗ‵๑)</p>
            <b>七夕节快乐我的<span style="color: pink;">猪</span></b>
          </div>
        </swiper-slide>
      </swiper>
    </div>

    <!-- 分页2 - 时间轴 -->
    <div class="page page2 flex">
      <swiper style="height: 450px;"
              :effect="'coverflow'"
              :grabCursor="true"
              :centeredSlides="true"
              :slidesPerView="'auto'"
              :coverflowEffect="{
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      }"

              class="margin-auto"
              :pagination="true"
              :modules="modules"
      >
        <swiper-slide style="width: 350px;">
          <div class="page2-box">
            <img src="https://cdn.jxwazx.cn/huahua-api/web-site-resources/%E4%B8%83%E5%A4%95%E7%89%B9%E4%BE%9B/page-2-1.jpg" alt="page2-1">
            <p><b>故事的开始</b></p>
            <p>{{data.date}}</p>
            <p>我们的故事，从此开始</p>
          </div>
        </swiper-slide>

        <swiper-slide style="width: 350px;" v-for="item in data.commemorateList">
          <div class="page2-box">
            <img :src="item.url">
            <p><b>{{item.title}}</b></p>
            <p>{{item.describe}}</p>
            <p>{{item.describe2}}</p>
          </div>
        </swiper-slide>
      </swiper>
    </div>

    <!-- 分页3 - 一段话 -->
    <div class="page page3">
      <div id="talkToXHJ">
        <b>回顾上一个七夕</b>
        <br/>
        {{data.firstThing}}
        <br/>
        <b>今年想说的话</b>
        <br/>
        {{data.wantTalk}}
        <br/>
        <b>我想</b>
        <br/>
        {{data.myTalk}}
        ## 爱你的仔仔 (๑′ᴗ‵๑)~ ❤
      </div>
    </div>

    <!-- 分页4 - 结尾 -->
    <div class="page page4">
      <div class="page4-box">
        <div class="page4-img">
          <swiper
              :effect="'flip'"
              :grabCursor="true"
              :navigation="true"
              :modules="modules"
              class="swiper-container-lovexhj3"
          >
            <swiper-slide class="swiper-slide" v-for="item in data.ImgList">
              <img :src="item.url" alt="page-4-1">
            </swiper-slide>
          </swiper>
        </div>
        <div class="page4-text">
          <h1>Send To Future</h1>
          <p>有你在的每一天都如糖果一样甜</p>
        </div>
      </div>

      <div class="footer">
        <div class="footerBox">
          <p>
            &copy; 2023
            <a href="https://www.jxwazx.cn/">HuaHua && DaiDai</a> |
            <a href="http://beian.miit.gov.cn">赣ICP备18001364号-2</a>
          </p>
          <p>THEME MADE BY <a href="https://www.jxwazx.cn">Huahua</a></p>
        </div>
      </div>
    </div>

    <!-- 两只XHJ一样的猪 -->
    <div class="xhjIsPig">
      <img src="https://cdn.jxwazx.cn/huahua-api/web-site-resources/%E4%B8%83%E5%A4%95%E7%89%B9%E4%BE%9B/pig1.gif" alt="pig1" class="pig1">
      <img src="https://cdn.jxwazx.cn/huahua-api/web-site-resources/%E4%B8%83%E5%A4%95%E7%89%B9%E4%BE%9B/pig2.gif" alt="pig2" class="pig2">
    </div>
  </div>
</template>

<style scoped>
.loading-container, .error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f2f5;
}
</style>
